<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>首页</title>
</head>

<body>
    <header>
        <div id="hd-left">
            <div id="logo">
                <img src="../src/images/logo-top.png" alt="" id="hd-logo-top">
                <img src="../src/images/logo-down.png" alt="" id="hd-logo-down">
            </div>
            <span>热爱105°C的你</span>
        </div>
        <ul id="hd-right">
            <img src="../src/images/我的-头像.png" alt="" id="hd-touxiang">
            <div id="hd-chose">
                <select name="" id="hd-select">
                    <option value="" id="pjw666">蒲嘉伟666</option>
                </select>
                <ul id="xialacaidan">
                    <li>个人中心</li>
                    <li>修改密码</li>
                    <li>退出登录</li>
                </ul>
            </div>
            <img src="../src/images/消息.png" alt="" id="hd-news">
            <img src="../src/images/我的-设置.png" alt="" id="hd-setting">
            </div>
    </header>
    <main>
        <div id="main-left">
            <ul>
                <li id="main-left-sy" class="main-left-li-active"><img src="./images/sy.png" alt="">首页</li>
            </ul>
            <ul class="sj">
                <li><img src="./images/sjzx.png" alt="">数据中心</li>
                <li>小区管理</li>
                <li>楼宇管理</li>
                <li>车位管理</li>
                <li>业主管理</li>
                <li>租客管理</li>
                <li>访客管理</li>
                <li>广告位管理</li>
                <li>车辆管理</li>
            </ul>
            <ul class="sf">
                <li><img src="./images/sfgl.png" alt="">收费管理</li>
                <li>收银台</li>
                <li>抄表录入</li>
                <li>未交账单</li>
                <li>缴费通知</li>
                <li>已交账单</li>
                <li>预存款管理</li>
                <li>收费设置</li>
            </ul>
            <ul class="wy">
                <li class="go-yw"><img src="./images/ywfw.png" alt="">物业服务</li>
                <li>公告管理</li>
                <li>报事报修</li>
                <li>投诉管理</li>
                <li>短信管理</li>
                <li>装修管理</li>
            </ul>
            <ul class="zl">
                <li><img src="./images/zlgl.png" alt="">租赁管理</li>
                <li>客户管理</li>
                <li>车位租赁</li>
                <li>广告位租赁</li>
                <li>房屋租赁</li>
                <li>合同管理</li>
            </ul>
            <ul class="wl">
                <li><img src="./images/wlgl.png" alt="">物料管理</li>
                <li>供应商管理</li>
                <li>仓库管理</li>
                <li>物料清单</li>
                <li>采购入库</li>
                <li>领用出库</li>
                <li>维修领退材</li>
                <li>库存查询</li>
            </ul>
        </div>
        <div id="main-right">
            <div id="m-r-hd">
                <div id="m-r-hd-left">
                    <img src="../src/images/left-hd-user.png" alt="">
                    <div id="left-message">
                        <p id="l-m-p1"><span id="wygs">xxx</span>物业公司</p>
                        <p><span>xxx</span>小区 VIP版 | 到期时间 2022-6-30</p>
                    </div>
                </div>
                <div id="m-r-hd-right">
                    <div>
                        <p>可添加小区(个)</p><span>6</span>
                    </div>
                    <div>
                        <p>剩余短信(条)</p><span>4512</span>
                    </div>
                </div>
            </div>
            <div id="xiaolaba-yellow">
                <img src="../src/images/left-laba.png" alt="">
                <p>欢迎使用智慧物业系统，开启你的智慧生活。</p>
            </div>
            <div id="seven-img">
                <div class="s-i-box">
                    <img src="../src/images/left-1.png" alt="" class="s-i-in">
                    <img src="../src/images/left-1-1.png" alt="" class="s-i-out">
                    <span class="s-i-b-span1">647</span>
                    <span class="s-i-b-span2">房屋认证数</span>
                </div>
                <div class="s-i-box">
                    <img src="../src/images/left-2.png" alt="" class="s-i-in">
                    <img src="../src/images/left-2-2.png" alt="" class="s-i-out">
                    <span class="s-i-b-span1" style="color: red;">1829</span>
                    <span class="s-i-b-span2">业主数</span>
                </div>
                <div class="s-i-box">
                    <img src="../src/images/left-3.png" alt="" class="s-i-in">
                    <img src="../src/images/left-3-3.png" alt="" class="s-i-out">
                    <span class="s-i-b-span1" style="color: orange;">231</span>
                    <span class="s-i-b-span2">租客数</span>
                </div>
                <div class="s-i-box">
                    <div class="s-i-box-mycolor"></div>
                    <img src="../src/images/left-4.png" alt="" class="s-i-in">
                    <img src="../src/images/left-4-4.png" alt="" class="s-i-out">
                    <span class="s-i-b-span1" style="color :purple">39</span>
                    <span class="s-i-b-span2">员工数</span>
                </div>
                <div class="s-i-box">
                    <div class="s-i-box-mycolor" style="background-color: green;"></div>
                    <img src="../src/images/left-5.png" alt="" class="s-i-in">
                    <img src="../src/images/left-5-5.png" alt="" class="s-i-out">
                    <span class="s-i-b-span1" style="color: green;">123</span>
                    <span class="s-i-b-span2">商家数</span>
                </div>
                <div class="s-i-box">
                    <img src="../src/images/left-6.png" alt="" class="s-i-in">
                    <img src="../src/images/left-6-6.png" alt="" class="s-i-out">
                    <span class="s-i-b-span1" style="color: orange;">1290</span>
                    <span class="s-i-b-span2">车位数</span>
                </div>
                <div class="s-i-box">
                    <img src="../src/images/left-7.png" alt="" class="s-i-in">
                    <img src="../src/images/left-7-7.png" alt="" class="s-i-out">
                    <span class="s-i-b-span1" style="color: rgb(0, 255, 191);">928</span>
                    <span class="s-i-b-span2">登记车辆数</span>
                </div>
            </div>
            <div id="xiao-main">
                <div id="x-m-left">
                    <div id="x-m-l-top">
                        <h5>房屋统计</h5>
                        <div class="x-m-l-t-tiaotiao">
                            <span>入住率</span>
                            <div class="tt-cover">
                                <div class="tt-green"></div>
                            </div>
                            <strong>70%</strong>
                        </div>
                        <div class="x-m-l-t-tiaotiao">
                            <span>出租率</span>
                            <div class="tt-cover">
                                <div class="tt-green" style="width: 20%;"></div>
                            </div>
                            <strong>20%</strong>
                        </div>
                        <div class="x-m-l-t-tiaotiao">
                            <span>空置率</span>
                            <div class="tt-cover">
                                <div class="tt-green" style="width: 5%;"></div>
                            </div>
                            <strong>5%</strong>
                        </div>
                        <div id="baifenbipaixu">
                            <span>0%</span>
                            <span>25%</span>
                            <span>50%</span>
                            <span>75%</span>
                            <span>100%</span>
                        </div>
                    </div>
                    <div id="x-m-l-middle">
                        <h5>满意度</h5>
                        <div id="xmlt-left">
                            <span>100</span>
                            <span>75</span>
                            <span>50</span>
                            <span>25</span>
                            <span>0</span>
                        </div>
                        <div id="xmlt-right">
                            <img src="../src/images/left-manyidu-pink.png" alt="">
                            <img src="../src/images/left-manyidu-qingse.png" alt="" style="bottom: 70px;">
                        </div>
                        <duv id="xmlt-down">
                            <span>1月</span><span>2月</span><span>3月</span><span>4月</span><span>5月</span><span>6月</span><span>7月</span><span>8月</span><span>9月</span><span>10月</span><span>11月</span><span>12月</span>
                        </duv>
                    </div>
                    <div id="x-m-l-down">
                        <h5>待办工单</h5>
                        <p>B1-1楼梯口消防设备维修 <span>2021-04-12 11:30</span></p>
                        <p>A2楼顶出现漏水现象 <span>2021-04-12 11:30</span></p>
                        <p>B1-1楼梯口消防设备维修 <span>2021-04-12 11:30</span></p>
                        <p>B1-1楼梯口消防设备维修 <span>2021-04-12 11:30</span></p>
                    </div>
                </div>
                <div id="x-m-middle">
                    <div id="x-m-m-top">
                        <h5>缴费统计</h5>
                        <h5><span>应缴费用：2039.23万元</span><span>已收：1039.23万元</span><span>待售：39.23万元</span></h5>
                        <div id="xmmt-five-arc">
                            <div class="thisArc">
                                <div class="grey-yuan">72%</div>
                                <span>停车费</span>
                            </div>
                            <div class="thisArc">
                                <div class="grey-yuan" style="color: orange;">70%</div>
                                <span>物业费</span>
                            </div>
                            <div class="thisArc">
                                <div class="grey-yuan" style="color: purple;">48%</div>
                                <span>商铺租金</span>
                            </div>
                            <div class="thisArc">
                                <div class="grey-yuan" style="color: rgb(255, 0, 98);">63%</div>
                                <span>水电费</span>
                            </div>
                            <div class="thisArc">
                                <div class="grey-yuan" style="color: green;">26%</div>
                                <span>维修费</span>
                            </div>
                        </div>
                    </div>
                    <div id="x-m-m-middle">
                        <h5>工单统计</h5>
                        <div id="xmmm-main">
                            <div id="xmmmm-left">
                                <span>100</span><span>75</span><span>50</span><span>25</span><span>0</span>
                            </div>
                            <div class="box-orange">
                                <b>40</b>
                                <div class="orange-text"></div>
                                <span>智能系统</span>
                            </div>
                            <div class="box-orange">
                                <b>88</b>
                                <div class="orange-text" style="height: 88%;"></div>
                                <span>消防系统</span>
                            </div>
                            <div class="box-orange">
                                <b>60</b>
                                <div class="orange-text" style="height: 60%;"></div>
                                <span>清洁绿化</span>
                            </div>
                            <div class="box-orange">
                                <b>40</b>
                                <div class="orange-text" style="height: 40%;"></div>
                                <span>空调维修</span>
                            </div>
                            <div class="box-orange">
                                <b>7</b>
                                <div class="orange-text" style="height: 7%;"></div>
                                <span>电梯问题</span>
                            </div>
                            <div class="box-orange">
                                <b>15</b>
                                <div class="orange-text" style="height: 15%;"></div>
                                <span>其他问题</span>
                            </div>

                        </div>
                    </div>
                    <div id="x-m-m-down">
                        <h5>开门类型统计</h5>
                        <div id="xmmd-main">
                            <div id="xmmdm-left">
                                <b>5893</b>
                                <span>总开门次数</span>
                            </div>
                            <div id="xmmdm-right">
                                <div class="xmmdmr-arc">
                                    <div style="background-color: yellow;"></div><span>人脸识别</span>
                                </div>
                                <div class="xmmdmr-arc">
                                    <div style="background-color: cyan;"></div><span>远程开门</span>
                                </div>
                                <div class="xmmdmr-arc">
                                    <div style="background-color: pink;"></div><span>指纹识别</span>
                                </div>
                                <div class="xmmdmr-arc">
                                    <div style="background-color: purple;"></div><span>APP扫描</span>
                                </div>
                                <div class="xmmdmr-arc">
                                    <div></div><span>门禁刷卡</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div id="x-m-right">
                    <div id="x-n-r-top">
                        <h5>快捷方式</h5>
                        <div id="xnrt-main">
                            <span>收银台</span>
                            <span>未缴账单</span>
                            <span>小区公告</span>
                            <span>一键报修</span>
                            <span>缴费通知</span>
                            <div>+添加</div>
                        </div>
                    </div>
                    <div id="x-n-r-down">
                        <h5>通知公告</h5>
                        <p>五一放假通知 <span>2021-04-12 11:30</span></p>
                        <p>四月账单已生成<span>2021-04-12 11:30</span></p>
                        <p>小区公区维护提醒<span>2021-04-12 11:30</span></p>
                        <p>垃圾分类提示<span>2021-04-12 11:30</span></p>
                        <p>小区公区维护提醒<span>2021-04-12 11:30</span></p>
                        <p>小区公区维护提醒<span>2021-04-12 11:30</span></p>
                        <p>小区公区维护提醒<span>2021-04-12 11:30</span></p>
                        <p>三月账单已生成<span>2021-04-12 11:30</span></p>
                        <p>三月账单已生成<span>2021-04-12 11:30</span></p>
                        <p>出行安全提示<span>2021-04-12 11:30</span></p>
                    </div>
                </div>
            </div>
        </div>
    </main>
    <nav id="nav-change-password" style="display: none;">
        <h3>修改密码
            <div id="dingwei-x">X</div>
        </h3>
        <div>
            <label for="">原密码:</label>
            <input type="text" id="ym" placeholder="请输入原密码">
        </div>
        <div>
            <label for="">新密码:</label>
            <input type="text" id="xm" placeholder="请输入新密码">
            <p id="password-msg"></p>
        </div>
        <div>
            <label for="">确认密码:</label>
            <input type="text" id="xxm" placeholder="请再次输入新密码">
        </div>
        <div id="nav-footer">
            <button id="navok" style="background-color: rgb(69, 107, 233); color: #fff;">确认</button>
            <button id="quxiao">取消</button>
        </div>

    </nav>
</body>

</html>